<template>
  <view class="container-wrap" :style="{ height: currentHeight }">
    <view class="title">
      <view @click="isFullScreenFn">数量波动</view>
      <view class="flex">
        <view style="width: 150px">
          <uni-select
            v-model="selectValue"
            dataKey="label"
            dataValue="value"
            :clear="false"
            :localdata="selectList"
            @change="conditionChange"
          ></uni-select>
        </view>
        <view style="width: 60px; margin-left: 10px">
          <uni-select
            v-model="dateType"
            dataKey="name"
            dataValue="value"
            :clear="false"
            :localdata="dateTypeList"
            @change="conditionChange"
          ></uni-select>
        </view>
      </view>
    </view>
    <view class="echart-wrap">
      <echarts-uniapp
        ref="quantityWaveRef"
        canvasId="quantityWaveChart"
        @touchStart="touchStart"
        @touchEnd="touchEnd"
      ></echarts-uniapp>
    </view>
    <uni-loading v-show="showLoading"></uni-loading>
  </view>
</template>
<script>
import { colorList, quantityList, dateTypeLst } from './baseData.js';
import echartsUniapp from '../common/echarts-uniapp/echarts-uniapp';
import uniLoading from '../common/uni-loading/uni-loading.vue';
import { getCurrentDateForParam } from '@/utils/common.js';
import { qualityStatistics } from '@/api/dashboard';
export default {
  props: {
    currentHeight: {
      type: String,
      default: '100vh'
    }
  },
  components: {
    echartsUniapp,
    uniLoading
  },
  data() {
    return {
      showLoading: false,
      canSlide: 0,
      touchXStart: 0,
      slideDirection: 0,
      xAxisList: [],
      selectValue: quantityList[0].value,
      selectList: quantityList,
      dateType: 'daterange',
      dateTypeList: dateTypeLst,
      option: {
        color: colorList,
        tooltip: {
          trigger: 'axis',
          responsive: true,
          confine: true,
          axisPointer: {
            type: 'shadow',
            axis: 'auto',
            snap: true
          },
          textStyle: {
            testShadowColor: 'transparent',
            textShadowBlur: 10
          },
          padding: 5
        },
        grid: {
          left: 10,
          right: 0,
          top: 20,
          bottom: 0,
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          data: []
        },
        yAxis: {
          min: 0,
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          },
          axisLabel: {
            formatter: '{value}吨'
          }
        },
        series: []
      }
    };
  },
  mounted() {
    this.qualityStatisticsFn();
  },
  methods: {
    isFullScreenFn() {
      if (this.currentHeight === '100vh') {
        return;
      }
      this.$tab.navigateTo('/packageA/pages/dashboard/quantityWave');
    },
    touchStart(e) {
      this.touchXStart = e.changedTouches[0].clientX || 0;
    },
    touchEnd(e) {
      const touchXEnd = e.changedTouches[0].clientX;
      if (this.touchXStart - touchXEnd > 0) {
        this.slideDirection = 1;
        this.qualityStatisticsFn();
      }
      if (this.touchXStart - touchXEnd < 0) {
        if (this.canSlide !== 0) {
          return;
        }
        this.slideDirection = 0;
        this.qualityStatisticsFn();
      }
    },
    conditionChange() {
      this.xAxisList = [];
      this.qualityStatisticsFn();
    },
    async qualityStatisticsFn() {
      let dateTime = '';
      if (!this.xAxisList.length) {
        dateTime = getCurrentDateForParam(new Date());
      }
      if (this.xAxisList.length) {
        if (!this.slideDirection) {
          dateTime = this.xAxisList[0]?.value?.split('_')?.[0];
        }
        if (this.slideDirection) {
          dateTime =
            this.xAxisList[this.xAxisList.length - 1]?.value?.split('_')?.[1];
        }
      }
      const data = {
        dateType: this.dateType,
        type: this.selectValue,
        reqSource: 1,
        slideDirection: this.slideDirection,
        time: dateTime
      };
      this.showLoading = true;
      const res = await qualityStatistics(data);
      if (res.code === 0) {
        this.canSlide = res?.data?.canSlide;
        const dataInfoList = res?.data?.dataInfoList || [];
        this.xAxisList = res?.data?.dateRespVOList || [];
        this.option.yAxis.max = this.isHasData(dataInfoList) ? 1 : null;
        this.option.yAxis.axisLabel.formatter = `{value}${
          this.dateType === 'daterange' ? '吨' : '万吨'
        }`;
        this.option.tooltip.formatter = this.getTooltip();
        this.option.xAxis.data = this.xAxisList.map((e) => e.label) || [];
        this.option.series = dataInfoList.map((e) => {
          return {
            name: e.coalSourceType,
            type: 'bar',
            data: this.getSeriesDataList(e),
            barWidth: 20,
            stack: 'total'
          };
        });
        this.$refs.quantityWaveRef.initChart(this.option);
      }
      this.showLoading = false;
    },
    getSeriesDataList(e) {
      return (e.dataValue || []).map((m, n) => {
        return {
          percent: e.percentValue[n],
          value: m
        };
      });
    },
    isHasData(list) {
      return list.every((e) => !e.dataValue.length);
    },
    getTooltip() {
      return (param) => {
        let result = `${param[0]?.name}\n\r`;
        const paramList = param.filter((e) => Number(e.value));
        if (paramList.length) {
          paramList.forEach((e, v) => {
            if (v === paramList.length - 1) {
              result += `${e.marker} ${e.seriesName} ${e.value}${
                this.dateType === 'daterange' ? '吨' : '万吨'
              } ${e.data.percent}%`;
            } else {
              result += `${e.marker} ${e.seriesName} ${e.value}${
                this.dateType === 'daterange' ? '吨' : '万吨'
              } ${e.data.percent}%\n\r`;
            }
          });
        } else {
          result += '暂无数据';
        }
        return result;
      };
    }
  }
};
</script>
<style lang="scss" scoped>
.container-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 15px 10px;
  background-color: #ffffff;
  border-radius: 8px;
  .title {
    display: flex;
    font-size: 14px;
    color: #000000;
    font-weight: 600;
    padding-bottom: 11px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e6e6e6;
  }
  .echart-wrap {
    flex: 1;
  }
  .flex {
    display: flex;
  }
  .flex-direction {
    flex-direction: column;
  }
}
</style>
